
<template>
  <div>
    <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color=#4682B4
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item index="1" @click="$router.push('/home')">首页</el-menu-item>
      <el-menu-item index="3" @click="$router.push('/DatabaseHome')">数据库</el-menu-item>

      <el-submenu index="2">
        <template slot="title">数据导入导出</template>
        <el-menu-item index="2-1" @click="$router.push('/DataImport')">导入数据</el-menu-item>
        <el-menu-item index="2-2" @click="$router.push('/DataExport')">导出数据</el-menu-item>
      </el-submenu>
    </el-menu>
    <h1>
      导入数据

    </h1>
    <div style="position: relative ;top:50%">

      <!-- 按钮 -->
      <el-upload
        class="upload"
        action=""
        :multiple="false"
        :show-file-list="true"
        accept="csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
        :http-request="httpRequest"
        :auto-upload="true"
      >
        <el-button slot="trigger" type="primary">选取文件</el-button>
        <el-button style="margin-left: 80px;" type="success" @click="save()">上传到服务器</el-button>
        <el-button style="margin-left: 120px;" type="primary" @click="goBack()">返回</el-button>
      </el-upload>
    <!-- 按钮 end -->
    </div>

  </div>
</template>

<script>
import XLSX from 'xlsx'

export default {
  data() {
    return {
      tableData: [{}],
      tableDataSecond: [{}]
    }
  },
  methods: {
    httpRequest(e) {
      const file = e.file // 文件信息
      console.log('e: ', e)
      console.log('file: ', e.file)

      if (!file) {
        // 没有文件
        return false
      } else if (!/\.(xls|xlsx)$/.test(file.name.toLowerCase())) {
        // 格式根据自己需求定义
        this.$message.error('上传格式不正确，请上传xls或者xlsx格式')
        return false
      }

      const fileReader = new FileReader()
      fileReader.onload = (ev) => {
        try {
          const data = ev.target.result
          const workbook = XLSX.read(data, {
            type: 'binary' // 以字符编码的方式解析
          })
          /*          for (var i = 0; i < 6; i++) {
            const exl = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[i]])
            console.log(exl)

          }*/
          const exlnamefirst = workbook.SheetNames[0] // 取第一张表
          const exlfirst = XLSX.utils.sheet_to_json(workbook.Sheets[exlnamefirst]) // 生成json表格内容
          // 将 JSON 数据挂到 data 里
          this.tableDataFirst = exlfirst
          console.log(this.tableDataFirst)

          const exlnamesecond = workbook.SheetNames[1] // 取第二张表
          const exlsecond = XLSX.utils.sheet_to_json(workbook.Sheets[exlnamesecond]) // 生成json表格内容
          this.tableDataSecond = exlsecond
          console.log(this.tableDataSecond)

          const exlnamethird = workbook.SheetNames[2] // 取第三张表
          const exlthird = XLSX.utils.sheet_to_json(workbook.Sheets[exlnamethird]) // 生成json表格内容
          this.tableDataThird = exlthird
          console.log(this.tableDataThird)

          const exlnamefourth = workbook.SheetNames[3] // 取第四张表
          const exlfourth = XLSX.utils.sheet_to_json(workbook.Sheets[exlnamefourth]) // 生成json表格内容
          this.tableDataFourth = exlfourth
          console.log(this.tableDataFourth)

          const exlnamefifth = workbook.SheetNames[4] // 取第五张表
          const exlfifth = XLSX.utils.sheet_to_json(workbook.Sheets[exlnamefifth]) // 生成json表格内容
          this.tableDataFifth = exlfifth
          console.log(this.tableDataFifth)

          const exlnamesixth = workbook.SheetNames[5] // 取第六张表
          const exlsixth = XLSX.utils.sheet_to_json(workbook.Sheets[exlnamesixth]) // 生成json表格内容
          this.tableDataSixth = exlsixth
          console.log(this.tableDataSixth)

          // document.getElementsByName('file')[0].value = '' // 根据自己需求，可重置上传value为空，允许重复上传同一文件
        } catch (e) {
          console.log('出错了：：')
          return false
        }
      }
      fileReader.readAsBinaryString(file)
    },
    save() {
      this.$confirm('若存在相同的物质编码,继续插入将覆盖, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.element.addExcelElement(this.tableDataFirst).then(res => {
        })
        this.$message({
          type: 'success',
          message: '覆盖成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消插入'
        })
      }),
      this.$api.addexcel.addExcelInLhsxb(this.tableDataSecond).then(res => {
      }),
      this.$api.addexcel.addExcelInHjxwb(this.tableDataThird).then(res => {
      }),
      this.$api.addexcel.addExcelInStwhb(this.tableDataFourth).then(res => {
      }),
      this.$api.addexcel.addExcelInJkwhb(this.tableDataFifth).then(res => {
      }),
      this.$api.addexcel.addExcelInHyxxb(this.tableDataSixth).then(res => {
      })
      this.$router.push({ path: '/element/element' })
    },
    goBack() {
      // 点击返回按钮，向后跳转
      this.$router.go(-1)
      console.log(this)
    }
  }
}
</script>
